<template>
  <div>
    <!-- 使用 ref 绑定 DOM 元素 -->
    <div ref="chartRef" class="one"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 使用 ref 创建一个响应式引用
const chartRef = ref(null)

onMounted(() => {
  if (chartRef.value) {
    // 初始化 ECharts 实例
    const myChart = echarts.init(chartRef.value)
    let series = [
      {
        data: [20600, 21000, 59600, 21000, 78000, 3000, 21000],
        type: 'bar',
        stack: 'a',
        name: 'a',
      },
    ]
    // 添加圆角
    const stackInfo = {}
    for (let i = 0; i < series[0].data.length; ++i) {
      for (let j = 0; j < series.length; ++j) {
        const stackName = series[j].stack
        if (!stackName) {
          continue
        }
        if (!stackInfo[stackName]) {
          stackInfo[stackName] = {
            stackStart: [],
            stackEnd: [],
          }
        }
        const info = stackInfo[stackName]
        const data = series[j].data[i]
        if (data && data !== '-') {
          if (info.stackStart[i] == null) {
            info.stackStart[i] = j
          }
          info.stackEnd[i] = j
        }
      }
    }
    for (let i = 0; i < series.length; ++i) {
      const data = series[i].data
      const info = stackInfo[series[i].stack]
      for (let j = 0; j < series[i].data.length; ++j) {
        // const isStart = info.stackStart[j] === i;
        const isEnd = info.stackEnd[j] === i
        const topBorder = isEnd ? 20 : 0
        const bottomBorder = 0
        data[j] = {
          value: data[j],
          itemStyle: {
            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder],
          },
        }
      }
    }
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '近7日挂号预约情况',
        subtext: '单位（元）'
      },
      xAxis: {
        type: 'category',
        data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [20600, 21000, 59600, 21000, 78000, 3000, 21000],
          type: 'line',
          smooth: true,
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
})
</script>

<style scoped>
.one {
  padding: 10px;
  width: 670px;
  height: 300px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 20px;
  /* margin-right: 15px; */
}
</style>
